@keyframes scalePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.call {
  padding: 0;

  &__container {
    padding: 16px;
    background-color: $call-background;
  }

  &__info {
    padding-left: 24px;
    div {
      box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.075);
      &:last-child {
        box-shadow: none;
      }
    }
    .title {
      color: $greyish-brown;
    }
  }

  &__draggable {
    width: 240px;
    z-index: 1000;
    background-color: $call-background;
    color: $call-title-color;
    border-radius: $default-border-radius;
    cursor: move;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
    box-sizing: border-box;
  }

  &__header {
    text-align: center;
    h2 {
      font-weight: 500;
      /* text-transform: uppercase; */

      margin-bottom: 36px;
    }
  }

  &__body {
    text-align: center;
    margin-top: 24px;
  }

  &__avatar {
    z-index: 15;
    box-shadow: 0 0 0 1px #fff;
  }

  &__avatar__container {
    position: relative;
    padding: 16px;

    &__rings {
      & > div {
        position: absolute;
        top: 50%;
        left: 50%;

        display: block;

        border-radius: 50%;
        background-color: rgba(black, .1);
        box-shadow: inset 0 0 0 1px rgba(black, .04);
        animation: scalePulse 1.75s infinite ease;

        @for $i from 1 through 3 {
          &:nth-child(#{$i}) {
            z-index: 10 - $i;

            width: $call-rings-size + ($call-rings-step * ($i - 1));
            height: $call-rings-size + ($call-rings-step * ($i - 1));
            margin-top: - ($call-rings-size + ($call-rings-step * ($i - 1))) / 2;
            margin-left: - ($call-rings-size + ($call-rings-step * ($i - 1))) / 2;

            animation-delay: 125ms * $i;
          }
        }
      }

      &--small {
        & > div {
          @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
              width: $call-rings-size-small + ($call-rings-step-small * ($i - 1));
              height: $call-rings-size-small + ($call-rings-step-small * ($i - 1));
              margin-top: - ($call-rings-size-small + ($call-rings-step-small * ($i - 1))) / 2;
              margin-left: - ($call-rings-size-small + ($call-rings-step-small * ($i - 1))) / 2;
            }
          }
        }
      }
    }
  }

  &__title {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: $call-title-color;

    margin: 36px 8px 24px;

    &--small {
      font-size: 18px;
      margin: 18px 2px 6px;
    }
  }

  &__controls {
    text-align: center;
    padding: 0 $default-padding;

    &--small {
      padding: 0 $default-padding / 2;
    }

    &__icons {
      margin-bottom: 16px;
      .button {
        height: auto;
        color: $call-button-color;

        &:hover {
          color: $call-button-color-hover
        }

        &[disabled] {
          color: rgba(white, .2);
        }
      }
    }

    &__buttons {
      .button {
        max-width: 250px;
        margin-bottom: 8px;
      }
    }
  }
}
